{% extends "../layouts/default.html" %}

{% block title %}登录{% endblock %}

{% block head %}
    <link rel="stylesheet" href="/public/admin/css/login.css">
    <link rel="stylesheet" href="/public/admin/css/override.css">
{% endblock %}

{% block content %}
    <div class="layadmin-user-login layadmin-user-display-show app-login" id="LAY-user-login">
        <div class="layui-layer-shade app-login-mask"></div>
        <div class="app-login-main">
            <div class="layadmin-user-login-box layadmin-user-login-header">
                <h2><img src="/public/common/images/logo.png" class="logo" alt="">麋鹿博客</h2>
                <p>欢迎登录后台管理系统</p>
            </div>
            <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
                <form action="" id="form" lay-filter="login-form">
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="app-username"></label>
                        <input type="text" name="username" autocomplete="off" value="" id="app-username" lay-verify="required" placeholder="用户名" class="layui-input">
                    </div>
                    <div class="layui-form-item">
                        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="app-password"></label>
                        <input type="password" name="password" autocomplete="off" value="" id="app-password" lay-verify="required" placeholder="密码" class="layui-input">
                    </div>
                    {# {{/*                    <div class="layui-form-item">*/}} #}
                    {# {{/*                        <div class="layui-row">*/}} #}
                    {# {{/*                            <div class="layui-col-xs7">*/}} #}
                    {# {{/*                                <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>*/}} #}
                    {# {{/*                                <input type="text" name="captcha" maxlength="2" id="LAY-user-login-vercode" lay-verify="required" placeholder="验证码" class="layui-input">*/}} #}
                    {# {{/*                            </div>*/}} #}
                    {# {{/*                            <div class="layui-col-xs5">*/}} #}
                    {# {{/*                                <div class="verify-img">*/}} #}
                    {# {{/*                                    <img src="1" alt="" id="captcha_img">*/}} #}
                    {# {{/*                                </div>*/}} #}
                    {# {{/*                            </div>*/}} #}
                    {# {{/*                        </div>*/}} #}
                    {# {{/*                    </div>*/}} #}
                    <div class="layui-form-item">
                        <button type="button" class="layui-btn layui-btn-fluid" id="submit" lay-submit lay-filter="LAY-user-login-submit">登 录</button>
                    </div>
                    <div class="layui-form-item none">
                        <a href="admin/register" target="_blank">注册</a>
                    </div>
                    <div class="layui-form-item layui-form-guest">
                        <p>演示账号：guest, guest，点击赋值</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        layui.use(['element', 'form', 'layer', 'jquery'], function () {
            var form = layui.form
            var layer = layui.layer
            var layerIndex = 0

            var onSubmit = function (data) {
                $.ajax({
                    url: '/admin/login',
                    type: 'post',
                    data: data.field,
                    success: function (res) {
                        if (res.code === 20103) {
                            var toPath = '/admin/'

                            res.data.token && app.cookie.set('milu.article.token', res.data.token, 1, toPath)
                            res.data.user && localStorage.setItem('milu.article.user', app.btoa(res.data.user))

                            location.href = toPath
                        } else {
                            layer.msg(res.msg, {
                                offset: '15px', icon: 2, time: 2000
                            })
                            $('#captcha_img').attr('src', '/captcha/math?' + Math.random())
                        }
                    },
                    error: function (xhr, status, thrown) {
                        if (xhr && xhr.responseJSON) {
                            layer.msg(xhr.responseJSON?.msg || '操作失败')
                        }
                    },
                    complete: function () {
                        layer.close(layerIndex)
                    }
                })
            }

            // 在500ms内疯狂点击只响应最后一次
            form.on('submit(LAY-user-login-submit)', _.debounce((data) => {
                onSubmit(data)

                layerIndex = layer.msg('加载中...', {
                    icon:16,
                    shade:[0.3, '#fff'],
                    time:false  //取消自动关闭
                });
            }, 500))


            var isVal = true
            $('.layui-form-guest').on('click', function () {
                var value = isVal ? 'guest' : ''
                isVal = !isVal

                $('#app-username, #app-password').val(value)
            })
        })
    </script>
{% endblock %}
